<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>手风琴效果</title>
		<meta charset="utf-8" />
		<title>news页面</title>
		<link rel="stylesheet" type="text/css" href="bootstrap-4.5.0/dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="css/home.css"/>
		<link rel="stylesheet" type="text/css" href="css/about.css"/>
		<link rel="stylesheet" type="text/css" href="css/services.css"/>
		<link rel="stylesheet" type="text/css" href="css/gallery.css"/>
		<link rel="stylesheet" type="text/css" href="css/shop.css"/>
		<link rel="stylesheet" type="text/css" href="css/contact.css"/>
		<link rel="stylesheet" type="text/css" href="css/blog.css"/>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
		<script src="bootstrap-4.5.0/dist/js/bootstrap.bundle.js" type="text/javascript" charset="UTF-8"></script>
		<script src="bootstrap-4.5.0/dist/js/bootstrap.js" type="text/javascript" charset="UTF-8"></script>
		<script src="js/popper.js" type="text/javascript" charset="UTF-8"></script>
		
	</head>
	<body>
		<!--头-->
		
		<div class="container d-flex flex-column flex-md-row justify-content-between">
			<!--左-->
			<ul class="list-unstyled d-flex mb-0 py-3 mx-auto mx-md-0">
				<li>
					<i class="fa fa-user mr-2"></i>
					<span class="text-secondary">login</span>
				</li>
				<li class="mx-3">
					<i class="fa fa-pencil mr-2"></i>
					<span class="text-secondary">Register</span>
				</li>
				<li >
					<i class="fa fa-cart-plus mr-2"></i>
					<span class="text-secondary">Checkout</span>
				</li>
			</ul>
			<!--右-->
			<ol class="list-unstyled d-flex mb-0 py-3 mx-auto mx-md-0">
				<li class="mx-3">
					<i class="fa fa-heart mr-2"></i>
					<span class="text-secondary">Wishlist</span>
				</li>
				<li>
					<i class="fa fa-angle-down mr-2"></i>
					<span class="text-secondary">USD</span>
				</li>
			</ol>
		</div>
		<!--搜索框-->
		<div class="container-fluid " style="background-image: url(img/header_bg.jpg);">
			<div class="row py-5 d-flex ">
				<div class="col-md-6 col-12 text-center">
				<img src="img/logo.png" />
				</div>
				<div class="col-md-6 col-12 text-center">
				<div class="btn-group">
					<input type="text " placeholder="Search..." class="border-0" />
					<button class="btn fa fa-search  btn-outline-danger banner" style="background-color: #fc5a6d;"></button>
				</div>
				</div>
			</div>
		</div>

		
		<!--导航栏-->
		<div class="navbar navbar-expand-md  p-0 " style="background-color: #fc5a6d;">
	<button class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#menu">
			   <i class="fa fa-bars "style="color: white;"></i>
			   </button>
	<div class="collapse navbar-collapse justify-content-center" id="menu">
		<ul class="navbar-nav text-capitalize">
			<li class="nav-item ">
				<a href="home.html" class="nav-link ">home</a>
			</li>
			<li class="nav-item">
				<a href="about.html" class="nav-link">about</a>
			</li>
			<li class="nav-item">
				<a href="services.html" class="nav-link">services</a>
			</li>
			<li class="nav-item">
				<a href="gallery.html" class="nav-link">gallery</a>
			</li>
			<li class="nav-item">
				<a href="bolg.html" class="nav-link default">blog</a>
			</li>
			<li class="nav-item">
				<a href="shop.html" class="nav-link ">shop</a>
			</li>
			<li class="nav-item">
				<a href="contact.html" class="nav-link ">contact</a>
			</li>
		</ul>
	</div>
	
</div>

		
		
		<!--blog标题-->
		
		
				
				<div class="text-center m-0 p-0" style="width: 100%;color: #FC5A6D;background-image: url(img/choose_bg.jpg);">
						   <div class="pb-5">
							   
						        <p class="display-4 font-weight-bold py-5">Blog Single</p>
						        <p>————————————————</p>
						        <p style="margin-top: -30px;">——————————</p>
								<span align="center">Home<span class="text-dark">/Blog Single</span></span>
				
							</div>
				</div>
	
	<!--中-->
	<!--最外div-->
	<div class="container d-flex flex-md-row flex-column py-5 mt-5">
		<!--左-->
		<div class="col-md-8 col-12 ">
		<div class="hui">
			
		<img src="img/blog_big.jpg"class="w-100"/>
		
		<h5 class="">illuminated accessories</h5>	
		<i class="">
			<span class="fa fa-user  p-2" >admin</span>
			<span class="fa fa-calendar  p-2">12 june 2018</span>
			<span class="fa	fa-tags  p-2">picture</span>
		</i>
	<p>
		Pleasure and praisinng pain was born and will give you a complete account of the systems,and expound the actual teaching.
	</p>	
		<p>
		Collective terms for hanndicrafts include artisanry,handicrafting,crafting,and handicraftsmanship.the
		term arts and crafts is also applied,especially in the United States and mostly to hobbyists'and children's
		output rather than items crafted for daily use,but this distinction is not formal,and the term is easily
		confused with the Arts and Crafts design movement,which is in fact as practical as it is aesrhetic
	</p>	
	<p>
		These activities werw called craftrs because originally many of them were professions under the guild
		system.Adolescents were apprenticed to a master craftsman,and refined their skills over a period of
		years in exchange for low wages.By the time their reaininh was complete,they were well equipped to set
		up in trade for themselves,earning their living with the skill that could be traded directly within the
		community,often for goods and services.
	</p>
	
	
		<!--tags -->
		
		<div class="d-flex flex-lg-row flex-column t">
			<div >
			Tags:
			
<button class=" bk1  border-0 p-2 py-3 mb-3">
	<a href="#" class="baise">Decoration</a>
</button>
<button class=" bk1  border-0 p-2 py-3 mb-3">
	<a href="#" class="baise">Household</a>
</button> 
<button class=" bk1  border-0 p-2 py-3 mb-3">
	<a href="#" class="baise">Stuff</a>
</button>
</div>
		<!--share /图标-->

		<div class="ml-lg-auto mt-3">
			
		
			<span class="">Share </span>
	<span class="fa fa-facebook fa-twitter  m-2 fs" ></span>	
	<span class="fa  fa-twitter   m-2  fs" ></span>	
	<span class="fa  fa-linkedin    m-2 fs" ></span>
	<span class='fa fa-vimeo  m-2 fs'></span>
		
		</div>
		</div>
	
		</div>
		
	<!--comments-->	
		<div class="container d-flex row">
			<b class=' mt-4 '>COMMENTS(2)</b>
		</div>
		<!--第一个人信息-->
		<div class="row mt-3">
			<div class="col-2 p-0">
				<img src="img/author-1.jpg"class="w-100"/>
			</div>
			<div class='col-10'>
		<h5>Matt Phillips
		<span class='fa fa-mail-reply-all  float-right'>reply</span>
		</h5>
		<h5 class='fs'>june 7,2018</h5>
			<p>
				There are many variations of passages of Lorem lpsum available,but the majority habe suffered
					alteration in some form,by injected humour,or randomised words which don't look even slightly
					believable.
			</p>
			</div>
		</div>
		<!--第二个人信息-->
		<div class="row mt-3">
			<div class="col-2 ">
				
			</div>
			<div class="col-2 p-0">
				<img src="img/author-2.jpg"class="w-100"/>
			</div>
			<div class='col-8'>
		<h5>Matt Phillips
		<span class='fa fa-mail-reply-all  float-right'>reply</span>
		</h5>
		<h5 class='fs'>june 7,2018</h5>
			<p>
				There are many variations of passages of Lorem lpsum available,but the majority habe suffered
					alteration in some form,by injected humour,or randomised words which don't look even slightly
					believable.
			</p>
			</div>
		</div>
		<!--左下表格-->	
		<!--地图   信息-->
		<div class='container p-0'>
			<b>LEAVER A REPLY</b>
					
			<div class='row '>
				<!-- name -->
				<div class='col-12 col-md-6 py-3 '>
					<input type="text" placeholder="Name" class='name w-100' />
				</div>
				<!-- email -->
				<div class='col-12 col-md-6 py-3 '>
					<input type="email"  placeholder="Email"class='name w-100'/>
				</div>
				<!-- subject -->
				<div class='col-12 py-3'>
					<input type="text"  placeholder="Subject" class='subject'/>
				</div>
				<!-- comment -->
				<div class='col-12 py-3 d-flex'>
					<textarea placeholder="Comment" class='comment'></textarea>
				</div>
				
			</div>
								
		<button class="fs  bk1 mt-3 border-0 py-1">
			<a href="#" class="baise">POST COMMENT</a>
		</button>	
								
			</div>

		</div>
		
	<!-- 右边 -->
	<!-- 搜索框 search -->
	<div class="col-md-4">
	<div class="form-control search mx-auto mx-md-0 p-0 align-self-center">
		<form class="d-flex h-100">
			<input type="text" placeholder="Search" class="border-0 w-75" />
			<button class="btn d-inline-block py-1 px-3 pl-5 ">
			<span class="fa fa-search "></span>
			</button>
		</form>
	</div>	
		
		
	<!-- recent post -->	
		<div class="py-4">
			<b>RECENT POST</b><br>
			<b class="b">————</b>
		</div>
		
	<div class="row">
		<!-- 图一 -->
		<div class="col-4">
			<img src="img/sidebar-post-1.jpg" />
		</div>
		<div class="col-8 p-0">
			<h5 class="font-weight-bold">Healthy Benefits Of Raw Food And Healthy Diet</h5>
			<p class='fs'>Dec 30,2016</p>
		</div>
		
		<!-- 图二 -->
		<div class="col-4 mt-3">
				<img src="img/sidebar-post-2.jpg" />
		</div>
		<div class="col-8 p-0 mt-3">
			<h5 class="font-weight-bold">Healthy Benefits Of Raw Food And Healthy Diet</h5>
			<p class='fs'>Dec 30,2016</p>
		</div>	
	</div>	
		
		
		<!--  BLOG CATEGORIES -->
		
		<div class="py-4">
			<b> BLOG CATEGORIES</b><br>
			<b class="b">————</b>
		</div>
		
		<!--  BLOG CATEGORIES下的列表 -->
		<div>
			<table class='table'>
				<tr>
					<td>Funky Jewelry
					<span class=' fs float-right ' >10</span>
					</td>
				</tr>
					<tr>
					<td>Knitted Hats
					<span class=' fs float-right' >35</span>
					</td>
				</tr>
					<tr>
					<td> Homemade Soap
					<span class=' fs float-right' >40</span>
					</td>
				</tr>
					<tr>
					<td>Birthday Cards
					<span class=' fs float-right' >10</span>
					</td>
				</tr>
					<tr>
					<td>Tank Tops
					<span class=' fs float-right' >8</span>
					</td>
				</tr>
			</table>
		</div>
		
		<!-- INSTAGRAM -->
		<div class="py-4">
			<b>INSTAGRAM</b><br>
			<b class="b">————</b>
		</div>
		
		<!-- 八个图片 -->
		<div class="row">
			<div class='col-3 p-1'>
				<img src="img/insta1.jpg"/>
			</div>
			<div class='col-3 p-1'>
				<img src="img/insta2.jpg" />
			</div>
			<div class='col-3 p-1'>
				<img src="img/insta3.jpg"/>
			</div>
			<div class='col-3 p-1'>
				<img src="img/insta4.jpg"/>
			</div>
		
		</div>
		<div class="row">
			<div class='col-3 p-1'>
				<img src="img/insta5.jpg"/>
			</div>
			<div class='col-3 p-1'>
				<img src="img/insta6.jpg" />
			</div>
			<div class='col-3 p-1'>
				<img src="img/insta7.jpg"/>
			</div>
			<div class='col-3 p-1'>
				<img src="img/insta8.jpg"/>
			</div>
		
		</div>
		
		<!-- product tags -->
		<div class="py-4">
			<b>PRODUCT TAGS</b><br>
			<b class="b">————</b>
		</div>
		<button class=" bk1  border-0 p-2">
			<a href="#" class="baise">Craft</a>
		</button>
		<button class="fenses bk1  border-0 p-2">
			<a href="#" class="baise">Decoration</a>
		</button>	
		<button class="fenses bk1  border-0 p-2">
			<a href="#" class="baise">Diy</a>
		</button>	
		<button class="fenses bk1  border-0 p-2">
			<a href="#" class="baise">Fashion</a>
		</button>
		<button class="fenses bk1 mt-2  border-0 p-2">
			<a href="#" class="baise">Lifestyle</a>
		</button>
		<button class="fenses bk1 mt-2  border-0 p-2">
			<a href="#" class="baise">General</a>
		</button>
		
	</div>
	
		
	</div>
	
	
	<!--Our Clients-->
	
	<div class="pink">
			<h2 class="text-white text-center py-3 " >Our Cliebts</h2>
			<div class="container">
				<div class="row pb-5">
					<div class="col-sm-12 text-center px-4">
						<img src="img/partner1.png" class="px-4 d-none d-xl-inline-block " />
					
						<img src="img/partner2.png" class="px-4 d-none  d-xl-inline-block" />
					
						<img src="img/partner3.png" class="px-4" />
					
						<img src="img/partner4.png" class="px-4 d-none  d-xl-inline-block" />
					
						<img src="img/partner5.png" class="px-4 d-none  d-xl-inline-block" />
					</div>
				</div>
			</div>
		</div>
	
	
	
	
	
	
	
	
	
	
		
	
	<!--底  黑色部分-->
		<div class="container-fluid  py-3 " style="background-color: #000000;">
	<div class="container">
		<div class="row">
			<div class="col-sm-6 col-md-6 col-lg-4">
				<div class="item">
					<img src="img/logo.png" class="mt-4" />
					<p class="text-white mt-1">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>

				</div>
			</div>
			<div class="col-lg-2 col-md-3 col-sm-3">
				<div class="item">
					<div class="footer-title text- py-3 font-weight-bold" style="font-size: 30px;color: #fc5a6d;">Help</div>
					<div class="row">
						<div class="col-md-3">
							<ul class="list">
								<li>
									<a href="#" class="text-white">Find&nbsp;Your&nbsp;Beer</a>
								</li>
								<li>
									<a href="#" class="text-white">Customer&nbsp;Service</a>
								</li>
								<li>
									<a href="#" class="text-white">Contact</a>
								</li>
								<li>
									<a href="#" class="text-white">Recent&nbsp;Orders</a>
								</li>
							</ul>
						</div>

					</div>
				</div>
			</div>
			<div class="col-lg-2 col-md-3 col-sm-3">
				<div class="item">
					<div class="footer-title text- py-3 font-weight-bold" style="font-size: 30px;color: #fc5a6d;">Link</div>
					<div class="row">
						<div class="col-md-3">
							<ul class="list">
								<li>
									<a href="#" class="text-white">Home</a>
								</li>
								<li>
									<a href="#" class="text-white">Shop</a>
								</li>
								<li>
									<a href="#" class="text-white">404 Page</a>
								</li>
								<li>
									<a href="#" class="text-white">Login</a>
								</li>
							</ul>
						</div>

					</div>
				</div>
			</div>
			<div class="col-sm-6 col-md-6 col-lg-4">
				<div class="footer-item">
					<div class="footer-title  py-3 font-weight-bold" style="font-size: 30px; color: #fc5a6d;">
						Our Information
					</div>
					<span class="fa fa-map-marker  mr-2 mt-2" style="float: left;color: #fc5a6d;"></span>
					<p class="text-white">787 Lakeview St. Marion, NC 28752 </p>
					<span class="fa fa-phone  mr-2 mt-2" style="float: left;color: #fc5a6d;"></span>
					<p class="text-white">+1800123654789 <br />&nbsp;&nbsp;&nbsp;&nbsp; +1800123456788 </p>
					<span class="fa fa-envelope  mr-2 mt-2" style="float: left;color: #fc5a6d;"></span>
					<p class="text-white">Support@Handmade.Net </p>
				</div>
			</div>
		</div>
	</div>

</div>
		
		
		<!--最后一行-->
		<div class="container-fluid text-center">
	<div class="row" style="background-color: #fc5a6d;">
		<div class="mx-auto col-lg-6">
			<p class="mt-3  text-white">Copyrights © 2018 All Rights
				<a href="#" class="text-muted">Reserved</a> by Himanshusofttech</p>
		</div>
		<div class="mt-3  col-lg-6 mx-auto justify-content-md-center">
			<i class="fa fa-facebook  px-1 bai"></i>
			<i class="fa fa-twitter  px-1 bai"></i>
			<i class="fa fa-google-plus  px-1 bai"></i>
			<i class="fa fa-linkedin  px-1 bai"></i>
			<i class="fa fa-pinterest-p  px-1 bai"></i>
		</div>
	</div>
</div>
	</body>
	
	

</html>
